<template>
	<div class="rankingAll">
		<div class="set_top clearfix">
			<div class="list-l fl">
				<span  class="num">10</span>
				<div class="img"><img :src="rankingTop.img"/></div>
				<span class="name">{{rankingTop.name}}</span>
			</div>
			<div class="list-r fr">
				<span class="list-r-tit">粉丝数</span>
				<span class="list-r-mes">{{rankingTop.val}}</span>
			</div>
		</div>
		
		<ul class="ranking-list">
			<li v-for="(item,index) in list" :key="index" class="clearfix">
				<div class="list-l fl">
					<span  class="num">{{item.num}}</span>
					<div class="img"><img :src="item.img"/></div>
					<span class="name">{{item.name}}</span>
				</div>
				<div class="list-r fr">
					<span class="list-r-tit">粉丝数</span>
					<span class="list-r-mes">{{item.val}}</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				rankingTop:{
					num:10,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"
				},
				list:[
					{num:1,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:2,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:3,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:4,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:5,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:6,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:7,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:8,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:9,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡	",val:"87283"},
					{num:10,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:11,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:12,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:13,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:15,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:16,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:17,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:18,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:19,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
					{num:20,img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",name:"小泡泡",val:"87283"},
				]
			}
		}
	}
</script>

<style>
	.set_top{background-color: #fff;padding: 0.1rem 0.2rem;margin-bottom: 0.07rem;}
	.num{display: inline-block;width: 0.26rem;height: 0.26rem;background-color: #f17e7e;text-align: center;line-height: 0.26rem;border-radius: 50%;font-size: 0.12rem;color: #fff;vertical-align: middle;margin-right: 0.08rem;}
	.img{width: 0.4rem;height: 0.4rem;display: inline-block;vertical-align: middle;margin-right: 0.13rem;}
	.img img{display: block;width: 100%;}
	.name{font-size: 0.16rem;color: #4C4C4C;display: inline-block;vertical-align: middle;}
	.list-r-tit{font-size: 0.14rem;color: #a0a0a0;line-height: 0.4rem;display: inline-block;margin-right: 0.08rem;}
	.list-r-mes{font-size: 0.14rem;color: #000000;line-height: 0.4rem;display: inline-block;}
	.ranking-list li{background-color: #fff;padding: 0.1rem 0;border-bottom: 1px solid #f5f5f5;}
	.ranking-list{background-color: #fff;padding: 0 0.2rem;}
	.ranking-list li:nth-child(1) .num{background-color: #ffb750;}
	.ranking-list li:nth-child(2) .num{background-color: #8c9fae;}
	.ranking-list li:nth-child(3) .num{background-color: #ecad49;}
</style>